import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
import { MeshoptDecoder } from 'three/addons/libs/meshopt_decoder.module.js';
export default class {
  body: any;
  option: any;
  wheels: any[] = [];
  group = new THREE.Group();
  material: THREE.MeshPhysicalMaterial;
  constructor(option?, url?) {
    this.option = option;
    this.createMaterial();
    this.loadModel(url);
  }
  loadModel(url: string): void {
    const loader = new GLTFLoader();
    loader.setMeshoptDecoder(MeshoptDecoder);
    loader.load(url, gltf => {
      const carModel = gltf.scene;
      this.body = carModel.getObjectByName('Object_37009');
      this.body.material = this.material;
      this.wheels.push(carModel.getObjectByName('Wheel001'), carModel.getObjectByName('Wheel002'));
      this.group.add(carModel);
    });
  }
  setColor(color: string) {
    const option = {
      ...this.option,
      color: new THREE.Color(color)
    };
    this.body.material = new THREE.MeshPhysicalMaterial(option);
    this.material = this.body.material;
  }
  createImgeMaterial() {
    const textureLoader = new THREE.TextureLoader();
    const map = textureLoader.load('texture/decal.png');
    map.colorSpace = THREE.SRGBColorSpace;
    map.flipY = false;
    const option = { ...this.option, map };
    delete option.color;
    this.body.material = new THREE.MeshPhysicalMaterial(option);
    this.material = this.body.material;
  }
  createMaterial() {
    const option = {
      ...this.option,
      color: new THREE.Color(this.option.color)
    };
    this.material = new THREE.MeshPhysicalMaterial(option);
  }
  update(time: number): void {
    for (let i = 0; i < this.wheels.length; i++) {
      this.wheels[i].rotation.z = time * Math.PI * 2;
    }
  }
}
